www.luotao2008.cn视频网校，仅需要一个耳机+QQ远程即可完成所有教学任务。

题 目:从零学习Flash课件制作(12)

第十二节 路径动画


在我们前面制作的物体移动的动画中，物体都是沿着直线移动的，这显然不能满足我们的所有要求。比如在本例我们制作的地球绕着太阳转的动画中，地球就是沿着椭圆轨道转动的。我们把沿着特定路径运动的动画叫做路径动画。本例我们就通过制作地球绕着太阳转的动画来学习路径动画的制作。
例1 地球绕着太阳转
制作步骤：
第一步，新建flash文件。
第二步，设置渐变填充色。在本例中，我们绘制的是一个卡通形象的太阳，其填充颜色不是我们以前用的单一的纯色，而是一种渐变色，因此在绘制太阳以前我们要先在颜色面板中把这种渐变色调好。点击菜单“窗口→颜色”，打开颜色面板，首先我们选择颜色类型，类型中有纯色、线性、放射性和位图，纯色就是单一颜色，线性是沿着一条线逐渐改变颜色，这里我们选择放射性，就是从一个中心焦点向四周逐渐改变颜色。如图1-12-1，面板下方有一个长条形的颜色标尺，双击其左边的 ，从打开的面板中选择黄色，再双击右边的 选择红色，这样工具栏中的填充颜色就被设置成黄红放射性渐变色了。

图1-12- 1

图1-12- 2

图1-12- 3


第三步，制作太阳元件。新建影片元件“sun”，在原点处绘制一个直径100像素的无笔触色的圆。再用工具栏中的渐变变形工具 点击圆形，圆形上出现一个带有编辑手柄的边框，如图1-12-2，拖动这些手柄，对渐变色的中心点、大小、角度等进行调整，直到自己满意为止。最后在圆上画一个笑脸图案，如图1-12-3。
第四步，制作地球元件。新建影片元件“globosity”，绘制一个直径30像素的圆形，填充颜色用上面的方法设置成白蓝放射性渐变色，让白色做为球的高光点，并用渐变变形工具 把白色移到球的右下方，以使其看起来有立体感，如图1-12-4。

图1-12- 4

图1-12- 5

图1-12- 6


第五步，布置场景。打开库，把太阳元件拖到舞台的正中间。把对象放置在舞台的正中间可以用对齐面板中的一些工具来帮忙，选中太阳影片，单击菜单“窗口→对齐”，打开对齐面板。如图1-12-5，先选中右边的相对于舞台按钮，再分别点击水平中齐按钮 和垂直中齐按钮 ，太阳影片就被调整到舞台正中间了，然后在第60帧插入帧，把时间轴延长至第60帧。
再插入图层2，把地球元件拖到舞台上，在第60帧插入关键帧，最后在第1帧和第60帧之间建立补间动画。
第六步，添加引导层。右键单击图层2的图层名，从弹出的右键菜单中选择“添加引导层”，图层2上面增加了一个引导层，如图1-12-6。然后在引导层第1帧绘制一个无填充颜色的椭圆做为地球转动的路径，如图1-12-7。再把舞台放大到200％，用选择工具 选中椭圆的一小段，按删除键删除掉，让椭圆出现一个小缺口，如图1-12-8。
第七步，设置引导动画。把舞台进一步放大，将比例设置为400％。让播放头停在第1帧，再用鼠标把地球影片拖到椭圆缺口处，当地球影片中的小圆正好对准缺口一端时放下影片。再把播放头拖到第60帧，把地球拖到椭圆缺口的另一端，如图1-12-9。注意，在让小圆对准缺口时，一定要让主工具栏中的“紧帧至对象”按钮 处于选中状态，这样才能保证对得准。这样地球围绕太阳转的动画就做好了，测试一下，可以看到地球不是沿着直线，而是沿着椭圆轨道运行的，而做为路径的椭圆在编辑时可见，在运行时就自动隐藏了。

图1-12- 7

图1-12- 8

图1-12- 9


例2 月亮地球太阳三球仪
三球仪是小学科学课中要用到的一个仪器，展示的是月亮围绕地球转，地球又围绕太阳转的运动系统。象这种动画在PowerPoint和Authorware中是不可能做出来的，但在Flash中却能轻松制作出来。
制作步骤：
第一步，新建Flash文件，把影片背景颜色设为黑色。
第二步，制作太阳、地球、月亮元件。选择菜单“插入→新元件”，新建一个名为“太阳”的影片元件，在其舞台上绘制一个红色圆。关于元件的命名，如果是大型课件，建议用有意义的英文单词命名，至于一般的小课件，如果英文基础不太好，可以用中文名。但舞台上的实例名如果涉及到编程，则要用英文名，至少也要用拼音，总之不能用汉字命名。用相同的方法制作影片元件“地球”和“月亮”，地球建议用蓝色，月亮用白色。如果有需要，大家也可以把这三个元件绘制得更加漂亮一些，另外三个球的大小关系也要注意，太阳最大，月亮最小。
第三步，建立月地系统元件。插入新元件，命名为“地月”。在“地月”元件编辑舞台，把元件库中的“地球”元件拖到舞台中心处，在第40帧插入普通帧。
然后插入图层2，在元件库中把“月亮”拖到第1帧，在第40帧插入关键帧，在第1帧与第40帧之间建立补间动画。
再点击时间轴窗口左下角的“添加运动引导层”按钮 ，插入一个引导层，在舞台中心绘制一个宽120、高60的空心白色椭圆，把舞台显示比例设为800％，选中椭圆一小段并删除，让椭圆出现一个小的缺口，再把图层2第1帧的“月亮”拖至并对准缺口的一端，把第40帧的“月亮”则对准缺口的另一端。这个“月地系统”就制作完成了。时间轴如图1-12-10所示，舞台上内容如图1-12-11所示。


图1-12- 10

图1-12- 11


第四步，回到场景1，在库中把“太阳”拖到舞台中心，插入新图层，在元件库中把元件“地月”拖到第1帧，再在第40帧插入关键帧，在第1帧与第40帧之间建立补间动画。
第五步，插入引导层，在引导层第1帧绘制一个空心椭圆，并打开一个小缺口，拖动图层2的“地月”影片，对准缺口的一端，再把第40帧的“地月”影片对准缺口的另一端，整个课件就制作完成了。主场景时间轴与图1-12-10相似。
例3 圆形跑道的追击问题
圆形跑道追击问题是小学数学应用题中经常研究的问题。有这样一道题：鸭哥哥和鸭弟弟在一个周长是120米的圆形跑道上跑步，它们同时从同一地点同向出发。鸭哥哥每分钟跑60米，鸭弟弟每分钟跑40米。问鸭哥哥第二次追上鸭弟弟时，它们各跑了几圈？
这道题对课件的要求就是：打开课件后，出示一圆形跑道，在起点处有一大一小两只鸭子，右下角有三个按钮，按开始按钮后两只鸭子开始按自己的速度沿圆周跑步，如图1-12-12所示。按暂停按钮后则停下，按停止按钮后都回到起点。


图1-12- 12

图1-12- 13

图1-12- 14


和前面路径动画不同的是，本例两只鸭子都绕着同一跑道运行，即两个图层的补间动画都对应着同一个引导层。而本例的一个难点是因两只鸭子速度不同，鸭哥哥跑了3圈而鸭弟弟只跑了2圈，我们不能以一圈为一个循环，也就是说在一个循环内，我们要让鸭哥哥跑3圈、鸭弟弟跑2圈，这样它们才能同时返回起点，返回第1帧开始一个新循环。
制作步骤：
第一步，新建Flash文件。
第二步，制作鸭子元件。鸭哥哥和鸭弟弟我们可以用同一个元件，在舞台上用大小区分它们就可以了。
选择菜单“插入→新建元件”，新建一个名为“鸭”的影片元件。将鸭的奔跑动作分解后分别画到前几帧上。如图1-12-13所示的4幅画面分别是本例中鸭元件的第1、2、3、4帧的画面。
第三步，打开元件库，把元件“鸭”拖到舞台上做为鸭弟弟，将其缩小至约16×20像素，在属性面板中将其命名为“di_mc”，然后在第60帧插入关键帧，在第1帧与第60帧之间建立补间动画。
第四步，添加引导层。单击时间轴面板左下角添加引导层按钮 ，在引导层第1帧舞台上用椭圆工具画一个直径约270像素的无填充颜色的圆，选中圆，打开对齐面板，让“相对于舞台” 处于选中状态，先后点击水平中齐按钮 和垂直中齐按钮 ，让圆处于舞台正中央。
第五步，把舞台比例放大到400％，把圆的正上方打开一个小的缺口。然后把播放头移到第1帧，把鸭弟弟拖至对准圆缺口的左端，再把播放头移到第60帧，拖动鸭弟弟对准圆缺口的右端。
再选中图层1第1帧，打开属性面板，让面板下面一个“调整到路径”选项处于选中状态，如图1-12-14所示。
如果没有选中此选项，那么影片在绕着引导线转动时其角度始终保持不变，就好象地球在绕着太阳公转时，其角度始终保持不变，对准北极星一样。选中此选项后，影片在运行中则会随着引导线角度的改变而改变，显然本例应该选中此选项。
至此我们还只让鸭弟弟绕着跑道转了一圈，下面我们用复制帧的方法让其跑下一圈。
第六步，在引导层第120帧单击右键，在右键菜单中选择“插入帧”，将引导层延长至第120帧。再选中图层1第1帧，按住Shift键，再选中第60帧，这样就将第1帧至第60帧全部选中，变为黑色，然后在选中区单击右键，从右键菜单中选择“复制帧”，再在第61帧单击右键，在右键菜单中选择“粘贴帧”，这样就将第1至60帧完全复制到第61帧至第120帧。
这步完成后，鸭哥哥在第1至60帧会沿着引导线跑一圈，第61至120帧又会绕着引导线跑第2圈。
第七步，单击时间轴左下角的添加图层按钮 ，添加图层3，然后用鼠标把图层3往下拖到图层1下面，让图层3也成为被引导层，如图1-12-15。这样图层1和图层3会共用一个引导层。

图1-12- 15

然后把元件库打开，把元件“鸭”拖到舞台上，做为鸭哥哥，调整其大小为约25×30像素。在属性面板中将其实例名命为“ge_mc”，拖动此影片，让其对准引导层圆的左缺口。在操作时，可以点击图层1 处，让其不可见，以免图层1干扰图层3的操作，等图层3制作完成后再让图层1可见。在图层3第40帧插入关键帧，拖动影片鸭哥哥让其对准圆的右缺口。再在第1帧与第40帧之间建立补间动画。
第八步，用与第六步相同的方法，把图层3的第1至40帧复制粘贴到第41至80帧，在第81至120帧之间再粘贴一次。这时如果图层3有超出120帧的帧，可以选中后用右键菜单删除掉。
第九步，添加圆形跑道。引导层在动画运行时是不可见的，所以我们现在还要增加一个可见的圆形跑道。添加图层4，把引导层第1帧的圆复制粘贴到图层4第1帧相同位置，并用线条工具补上缺口。
现在如果测试影片，两只鸭绕着跑道跑步的动画就制作完成了。下面我们要做的是用按钮和语句控制鸭的运行。
第十步，添加图层5，选择菜单“窗口→公用库→按钮”，在公用库中拖3个按钮到舞台右下角，如图1-12-12，在属性面板中将它们分别命名为“play_btn”、“pause_btn”和“stop_btn”。
第十一步，编写控制语句。添加图层6，选中第1帧，打开动作面板。下面的所有语句都会写在图层6第1帧动作面板，只是我们的讲述会按照我们的制作思路来进行。
首先编写让主场景播放头停留在第1帧，让两只鸭影片内部播放头也停留在第1帧的语句：
stop();
ge_mc.stop();
di_mc.stop();
然后写入点击播放按钮“play_btn”后，主场景播放头、两只鸭影片内部播放头都向前播放的语句：
play_btn.onRelease = function() {
ge_mc.play();
di_mc.play();
play();
};
再写入点击暂停按钮“pause_btn”后，主场景停止播放，两只鸭影片内部播放头也停止播放的语句：
pause_btn.onRelease = function() {
ge_mc.stop();
di_mc.stop();
stop();
};
最后写入点击停止按钮后，主场景跳转停止到第1帧，两只鸭影片内部播放头也停止播放的语句：
stop_btn.onRelease = function() {
ge_mc.stop();
di_mc.stop();
gotoAndStop(1);
};
至此，所有控制语句都已完成，这所有的语句都是写在第1帧的，那么图层6第1帧的所有语句应该是如下所示：
stop();
ge_mc.stop();
di_mc.stop();
play_btn.onRelease = function() {
ge_mc.play();
di_mc.play();
play();
};
pause_btn.onRelease = function() {
ge_mc.stop();
di_mc.stop();
stop();
};
stop_btn.onRelease = function() {
ge_mc.stop();
di_mc.stop();
gotoAndStop(1);
};
第十二步，测试影片。

FLASH课件制作培训班开班了！火热报名中!加我站管理QQ444860709解决任何疑问！ 培训QQ专业群67042004。